<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>支付</title>
    <style>
        *{margin: 0;padding: 0;font-size: 16px;}
        .container{color: #000000;background: #f1f1f1;height: 100vh;}
        .row-space{height: 1.5rem;display: block;width: 100%;}
        .title{font-weight: bold;font-size: 1.1rem;text-align: center;padding: 0 1rem; word-wrap: break-word;word-break: break-all;}
        .price{font-weight: bold;font-size: 1.2rem;text-align: center}
        .price span{font-size: 1rem;margin: 0 0.3rem;}
        .mch{background: #ffffff;display: flex;justify-content: space-between;height: 3rem;line-height: 3rem;border-top: solid 1px #eee;border-bottom: solid 1px #eee;}
        .mch div{padding: 0 4%;}
        .mch .label{color: #757474;}
        .btn{background: #26b507;color: #ffffff;display: block;margin: 0 auto;width: 94%;text-align: center;height: 3rem;line-height: 3rem;border-radius: 0.5rem;}
        .err-msg{text-align: center;color: red;font-size: 0.8rem;}
    </style>
</head>
<body>
<div class="container">
    <div class="row-space"></div>
    <div class="row-space"></div>
    <div class="title">{{.title}}</div>
    <div class="row-space"></div>
    <div class="price"><span>¥</span>{{.amt}}</div>
    <div class="row-space"></div>
    <div class="mch"><div class="label">收款方</div><div>{{.mchName}}</div></div>
    <div class="row-space"></div>
    <div class="btn" id="pay-btn" onclick="clickPayBtn()">立即支付</div>
    <div class="row-space"></div>
    {{if .errMsg}}<div class="err-msg">* {{.errMsg}}</div>{{end}}
</div>
<script>
    // 点击支付
    function clickPayBtn(){
        //微信JSAPI支付
        jsapipay();
    }
    // 微信JSAPI支付
    function jsapipay() {
        let payinfoStr = "{{.payinfo}}";// 微信支付
        let payinfo = JSON.parse(payinfoStr);
        function onBridgeReady() {
            WeixinJSBridge.invoke('getBrandWCPayRequest', {...payinfo}, function (res) {
                console.log("onBridgeReady ",res.err_msg)
                //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                if (res.err_msg == "get_brand_wcpay_request:ok") {
                    //TODO 查询支付结果，支付成功进入回调页面
                    window.location.href="{{.cbUrl}}"
                }
            });
        }
        if (typeof WeixinJSBridge == "undefined") {
            if (document.addEventListener) {
                document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
            } else if (document.attachEvent) {
                document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
            }
        } else {
            onBridgeReady();
        }
    }
    //window.onload = function (){}
</script>
</body>
</html>